<!--
 * @FileDescription 
 * @Author lz
 * @Date 20230320 14:43:40
 * @LastEditors lz
 * @LastEditTime 20230320 14:43:40
-->
<template>
    <div class="ConBox_b">
        <div class="col_1">
            <div>
                <span class="tit">Quick Start</span>
            </div>
            <div class="ColorBlock_1 base textStyle">
                Setup
            </div>
            <div class="ColorBlock_2 base textStyle">
                Reset All
            </div>
            <div class="ColorBlock_3 base textStyle" @click="AutoBtn()">
                Start Auto
            </div>
        </div>
        <div class="col_2">
            <div>
                <span class="tit">Others</span>
            </div>
            <div class="ColorBlock_4 base textStyle">
                Reset All
            </div>
            <div class="ColorBlock_5 base textStyle">
                Start Auto
            </div>
            <div class="checkBox">
                <a-switch v-model:checked="checked" />Lock Task Panel
            </div>
            <div class="checkBox">
                <a-switch v-model:checked="checked2" />PNC Monitor
            </div>
            <div class="checkBox">
                <a-switch v-model:checked="checked3" />Sim Control
            </div>
            <div class="checkBox">
                <a-switch v-model:checked="checked4" />Camera Sensor
            </div>
        </div>
        <div class="col_3">
            <div>
                <span class="tit">Module Delay</span>
            </div>
            <div class="ModDelList" v-for="(item, index) in state.ModuleDelayList" :key="index">
                <div class="Text_1">{{ item.name }}</div>
                <div class="Text_2">{{ item.T }}</div>
            </div>
        </div>
        <div class="col_4">
            <div>
                <span class="tit">Console</span>
            </div>
            <div class="rollBox">
                <div class="ConList" v-for="(item, index) in state.ConsoleList" :key="index">
                    <img src="/apoImg/sanjiao.png" class="warn_ico">
                    <div class="Text_3">{{ item.name }}</div>
                    <div class="Text_4">{{ item.T }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref } from 'vue';

function getNowFormatDate() {
    var date = new Date();
    var seperator2 = ":";
    var hours = date.getHours();
    if (hours >= 0 && hours <= 9) {
        // @ts-ignore
        hours = "0" + hours;
    }
    var minutes = date.getMinutes();
    if (minutes >= 0 && minutes <= 9) {
        // @ts-ignore
        minutes = "0" + minutes;
    }
    var seconds = date.getSeconds();
    if (seconds >= 0 && seconds <= 9) {
        // @ts-ignore
        seconds = "0" + seconds;
    }
    var currentdate = hours + seperator2 + minutes
        + seperator2 + seconds;
    return currentdate;
}

const state = reactive({
    region: undefined,
    region2: undefined,
    region3: undefined,
    MenuStatus: 0,
    setupList: [
        'Camera - Lidar Sensor Calibration',
        'Car Teleop',
        'Console Teleop',
        'Dev Kit Close Loop',
        'Dev Kit Debug',
        'Ipc1 Mkz Close Loop',
        'Ipc1 Mkz Standard Debug',
        'Ipc2 Mkz Close Loop',
        'Ipc2 Mkz Standard Debug',
        'Ipc2 Mkz Sensor Calibration',
        'Map Collection',
        'Mkz 64beam',
        'Mkz Close Loop',
        'Mkz Lgsvl',
        'Mkz Standard Debug',
        'Mkz Standard Debug Hesai',
        'Mkz Standard  Debug Smart Recorder',
        'Navigation'
    ],
    vehicleList: [
        '60dev Kit Advanced Ne-5'
    ],
    mapList: [
        'Map Name',
        'Map Name.Last',
        'San Mateo',
        'Sunnyvale Big Loop',
        'Sunnyvale Loop',
        'Sunnyvale With Two Offices'
    ],
    ModuleDelayList: [
        { name: 'Chassis', T: '00:00.000' },
        { name: 'Control', T: '00:00.000' },
        { name: 'Localization', T: '00:00.000' },
        { name: 'Perception Obstacle', T: '00:00:000' },
        { name: 'Planning ', T: '00:00:000' },
        { name: 'Prediction ', T: '00:00:000' },
        { name: 'Traffic Light' }
    ],
    ConsoleList: [
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() },
        { name: 'Localization msg lost', T: getNowFormatDate() }
    ],
});
async function AutoBtn() {
    //点击Start Auto
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackClickStartAutoRequest())
}
const checked = ref<boolean>(false);
const checked2 = ref<boolean>(false);
const checked3 = ref<boolean>(false);
const checked4 = ref<boolean>(false);
onMounted(() => {
    // setInterval(() => {
    //     console.log(Math.floor(Math.random()*10))
    // }, 500)
})
</script>

<style scoped>
.ConBox_b {
    width: 1762px;
    height: 364px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #020D15;
    display: flex;
}

.col_1 {
    width: 390px;
    height: 364px;
    background: #1A2225;
    padding-left: 22px;
}

.col_2 {
    width: 460px;
    height: 364px;
    background: #1A2225;
    padding-left: 22px;
    margin-left: 3px;
}

.col_3 {
    width: 413px;
    height: 364px;
    background: #1A2225;
    padding-left: 22px;
    margin-left: 3px;
}

.col_4 {
    width: 491px;
    height: 364px;
    background: #1A2225;
    padding-left: 22px;
    margin-left: 3px;
}

.rollBox {
    margin-top: 4px;
    height: 314px;
    overflow-y: auto;
}

.tit {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    padding-bottom: 8px;
    line-height: 44px;
    border-bottom: 2px solid #626A6D;
}

.ColorBlock_1 {
    width: 355px;
    height: 58px;
    line-height: 58px;
    margin-bottom: 11px;
    margin-top: 7px;
}

.ColorBlock_2 {
    width: 355px;
    height: 58px;
    line-height: 58px;
    margin-bottom: 11px;
}

.ColorBlock_3 {
    width: 355px;
    height: 136px;
    line-height: 136px;
}

.ColorBlock_4 {
    width: 415px;
    height: 54px;
    line-height: 54px;
    margin-top: 7px;
    margin-bottom: 10px;
}

.ColorBlock_5 {
    width: 415px;
    height: 54px;
    line-height: 54px;
    margin-bottom: 10px;
}

.base {
    border-bottom: 2px solid #19836A;
}

.textStyle {
    background: linear-gradient(0deg, #000000, #10211D);
    text-align: center;
    font-weight: 500;
    color: #8E9995;
    font-size: 16px;
}

.checkBox {
    line-height: 40px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #929B9E;
}

:deep().ant-switch {
    margin-right: 12px;
    border-radius: 0;
    margin-top: -3px;
    background: #40464A;
}

:deep().ant-switch-checked {
    background: #1E3C50;
}

:deep().ant-switch-handle::before {
    border-radius: 0;
    background: #9EA6A8;
}

:deep().ant-switch-checked>.ant-switch-handle::before {
    background-color: #3AA4FB;
}

:deep().ant-switch-handle {
    width: 16px;
    height: 16px;
    top: 3.2px;
}

.ModDelList {
    line-height: 30px;
    overflow: hidden;
}

.Text_1 {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #018267;
    float: left;
}

.Text_2 {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #9C2E39;
    float: right;
    margin-right: 20px;
}

.warn_ico {
    width: 20px;
    height: 20px;
    float: left;
    margin-top: 10px;
}

.ConList {
    height: 40px;
    border-top: 1px solid #2B3336;
    margin-right: 11px;
}

.Text_3 {
    margin-top: 8px;
    margin-left: 11px;
    float: left;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #CC2F6A;
}

.Text_4 {
    margin-top: 9px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #CC2F6A;
    float: right;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(129, 133, 156, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 133, 156, 0.5);
}

::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(129, 133, 156, 0.1);
}
</style>